<template>
	<!-- 商品主数据列表-->
	<el-dialog v-dialogDrag title="书籍信息" width="900px" :visible.sync="showonoff" append-to-body
		:close-on-click-modal="false"  @close="cancel" class="bookInfo">
		<view class="b-center">
			<view class="b-c-left">
				<view class="image-warp" @click="chooseImageFn">
					<image class="image"  :src="form.bookImageSrc"></image>
					<view class="el-icon-error" v-if="form.bookImageSrc.length>0" @click.stop="deletImageFn"></view>
					<i class="el-icon-plus"></i>
				</view>
				<el-link :underline="false" type="primary">书籍封面</el-link>
			</view>
			<view class="b-c-right">
				<el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px"
					class="demo-ruleForm" :size="size">
					<el-form-item label="小说名称" prop="bookName">
						<el-input v-model="form.bookName" :size="size" placeholder="请输入小说名称"></el-input>
					</el-form-item>
					<el-form-item label="作者笔名" prop="bookAuthor">
						<el-input v-model="form.bookAuthor" :size="size" placeholder="请输入作者笔名"></el-input>
					</el-form-item>
					<el-form-item label="小说简介" prop="bookSynopsis">
						<el-input type="textarea" :autosize="{ minRows:4, maxRows:8}" v-model="form.bookSynopsis" :size="size" placeholder="请输入小说简介"></el-input>
					</el-form-item>
					<el-form-item label="所属分类" prop="bookType">
						<el-select value-key="label"  v-model="form.bookType" placeholder="请选择" @change="changeBookType" :size="size">
						    <el-option v-for="item in bookTypeList" :key="item.value" :label="item.label" :value="item.value">
						    </el-option>
						</el-select>
					</el-form-item>
					<!-- 1已完本，0连载中 -->
					<el-form-item label="完本状态" prop="completionStatus">
						<el-switch v-model="form.completionStatus" active-color="#13ce66" active-text="已完本" :activeValue="1" :inactiveValue="0" inactive-text="连载中"></el-switch>
					</el-form-item>
					<el-form-item label="初始评分" prop="score">
						<el-input-number v-model="form.score" :min="0" :max="5" label="请输入初始评分" :size="size" style="margin-right: 10px;"></el-input-number> 分
					</el-form-item>
					<el-form-item label="初始人气" prop="popularityNum">
						<el-input-number v-model="form.popularityNum" :min="0" label="请输入初始评分" :size="size" style="margin-right: 10px;"></el-input-number> 人气
					</el-form-item>
				</el-form>
			</view>
		</view>
		<span slot="footer" class="dialog-footer">
			<el-button @click="cancel" size="mini">取 消</el-button>
			<el-button type="primary" @click="bindConfiguration" size="mini">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	let that;
	import {
		mapState
	} from 'vuex';
	export default {
		name: 'bookinfo',
		props: {
			activeInfo: {
				type: Object,
				default: () => {
					return {};
				}
			},
		},
		computed: {
			...mapState('ui',['size']),
		},
		data() {
			return {
				showonoff:false,
				form: {
					bookName: '', //小说名称
					bookAuthor: '', //作者笔名
					bookImageSrc: '', //小说封面
					bookSynopsis: '', //小说描述
					bookType:1,//小说类型
					bookTypeTxt:'玄幻小说',//小说类型描述
					completionStatus:0,//完本状态 1已完本，0连载中
					lastChapter:'',//最后章节
					lastUpdate:'',//最后更新时间
					score:0,//评分
					popularityNum:0,//人气
				},
				rules: {
					bookName: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					bookAuthor: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					bookImageSrc: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					bookSynopsis: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					bookType: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					score: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
					popularityNum: [{
						required: true,
						message: '必填',
						trigger: 'blur'
					}],
				},
				//小说类别 //1为玄幻，2修真，3都市，4穿越，5网游，6科幻，7其他
				bookTypeList: [{
				  value: 1,
				  label: '玄幻小说'
				}, {
				  value: 2,
				  label: '修真小说'
				}, {
				  value: 3,
				  label: '都市小说'
				}, {
				  value: 4,
				  label: '穿越小说'
				}, {
				  value: 5,
				  label: '网游小说'
				}, {
				  value: 6,
				  label: '科幻小说'
				},{
				  value: 7,
				  label: '其他小说'
				}]
			};
		},
		watch:{
		},
		mounted() {
			that = this;
			//删除无用数据
			uni.$lizhao.uploadFile.delectFile()
		},
		methods: {
			//编辑
			edit(data){
				if(!data.score){
					data.score=0
				}
				if(!data.popularityNum){
					data.popularityNum=0
				}
				if(!data.completionStatus){
					data.completionStatus=0
				}
				this.form={...data}
			},
			//点击确定
			bindConfiguration(){
				this.$refs.ruleForm.validate((valid) => {
					if (valid) {
						that.$emit('submit',this.form)
					} else {
						console.log('error submit!!');
						return false;
					}
				});
				
			},
			//删除封面
			deletImageFn(){
				uni.showModal({
					title: '提示',
					content: '确定要删除小说封面',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if(res.confirm){
							that.form.bookImageSrc=''
						}
					}
				});
			},
			//选取图片
			chooseImageFn(){
				uni.chooseImage({
				    count: 1,
					extension:['.png','.jpg'],
				    success: function (res) {
						uni.$lizhao.uploadFile.upload(res.tempFilePaths[0],res.tempFiles[0].name,function(Progress){
							//上传进度
							console.log(Progress);
						}).then(res=>{
							console.log(res);
							that.form.bookImageSrc=res
						})
				    }
				});
			},
			//切换小说类型
			changeBookType(item){
				this.bookTypeList.forEach(i=>{
					if(i.value==item){
						this.form.bookTypeTxt=i.label
					}
				})
			},
			//取消
			cancel(){
				this.showonoff=false
			},
			//重置
			format(){
				this.form.bookImageSrc=''
				this.$refs.ruleForm.resetFields()
			},
			//显示
			show(onoff){
				this.showonoff=onoff
			}
		}
	};
</script>

<style lang="scss" scoped>
	.bookInfo{
		.b-center{
			display: flex;padding:0 80rpx;
			.b-c-left{
				width: 200rpx;display: flex;flex-direction: column;align-items: center;
				.image-warp{
					width: 300rpx;height: 400rpx;border: 1px solid #f1f1f1;position: relative;cursor: pointer;background: url(../../../../static/images/bookImage/zhuishu.png) no-repeat 100% 100%;
					background-size: 100% 100%;
					.image{
						width: 100%;height: 100%;z-index: 10;position: absolute;
					}
					.el-icon-plus{
						position: absolute;left: 45%;top: 45%;font-weight: bold;
					}
					.el-icon-error{
						position: absolute;right: 0;top: 0;color: red;font-size: 40rpx;z-index: 11;
					}
				}
			}
			.b-c-right{
				flex: 1;margin-left: 160rpx;
			}
		}
	}
	
</style>
